<template>
  <div class="app-container">
    <search-form :search-items="searchItems" :moreBtnList="moreBtnList" @refresh="refresh" />
    <div class="table-container">
      <vxe-table ref="tableRef" :row-config="rowConfig" :data="tableData" :seq-config="seqConfig" @row-dragend="rowDragendEvent">
        <vxe-column field="role" title="排序" drag-sort width="50"></vxe-column>
        <vxe-column type="seq" title="序号" width="50" align="center"></vxe-column>
        <vxe-column field="normativeType" title="连带规范性动作类型" min-width="160" show-overflow="title"></vxe-column>
        <vxe-column field="specificRequirement" title="具体要求" min-width="160" show-overflow="title"></vxe-column>
        <vxe-column field="departmentName" title="主办部门" min-width="130" show-overflow="title"></vxe-column>
        <vxe-column field="responsiblePersonName" title="负责人" width="70"></vxe-column>
        <vxe-column field="leastNumber" title="目标次数" width="60" align="center"></vxe-column>
        <vxe-column field="completeDeadline" title="完成时限" min-width="100" show-overflow="title"></vxe-column>
        <vxe-column
          field="whetherSupportContact"
          title="是否支持基层调研"
          width="80"
          show-overflow="title"
          :formatter="formatterWhetherEnable"
          align="center"
        ></vxe-column>
        <vxe-column
          field="whetherEnable"
          title="是否启用"
          width="80"
          align="center"
          :formatter="formatterWhetherEnable"
        ></vxe-column>
        <vxe-column field="year" title="年度" width="60" align="center"></vxe-column>
        <vxe-column field="action" title="操作" width="150" align="center">
          <template #default="{ row }">
            <vxe-button mode="text" status="primary" @click="editDetails(row)">编辑</vxe-button>
            <vxe-button mode="text" status="primary" @click="deletePageData({ id: row.id, ids: [row.id] })">删除</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination
        background
        :current-page="pageNumber"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper, total"
        :total="total"
        @current-change="pageChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog :title="formType === NEWLY_ADDED.type ? NEWLY_ADDED.title : EDIT.title" :visible.sync="dialogFormVisible">
      <jdf-increased-form
        ref="increaseForm"
        :configs="configs"
        :data="formData"
        :formAttrs="formAttrs"
        :all-fields-readonly="allFieldsReadonly"
        :rules="rules"
        @selectIdOrOrg="selectIdOrOrg"
      ></jdf-increased-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { getPageSubjectPage, saveSubject, batchDelete, getSubjectDetail, subjectUpdateOrder } from '@/api/business/subjectManage';
import SearchForm from '@/components/SearchForm';
import listTableMixins from '@/mixins/listTableMixins';
import { DEPT_GROUP_SELECT_CONFIG } from '@/utils/common-form-field';
import configManagementMixins from '@/mixins/configManagementMixins.js';
import processFormCommonMixin from '@/views/procecss-form/processFormCommonMixin.js';
export default {
  name: 'NormativeTypeConfig',
  components: { SearchForm },
  mixins: [listTableMixins, processFormCommonMixin, configManagementMixins],
  data() {
    return {
      //获取表格数据
      getTable: getPageSubjectPage,
      //删除表格数据
      deleteList: batchDelete,
      //更新表格数据
      updateList: saveSubject,
      //新增表格数据
      addList: saveSubject,
      //排序表格
      sortList: subjectUpdateOrder,
      // 弹窗表单行数据
      formData: {
        //完成时限
        completeDeadline: dayjs().endOf('year').format('YYYY-MM-DD'),
        //主职id
        departmentCode: '',
        //主职部门
        departmentName: '',
        //是否启用
        whetherEnable: true,
        //目标次数
        leastNumber: 1,
        //连带规范性动作类型
        normativeType: '',
        //负责人
        responsiblePerson: '',
        //负责人姓名
        responsiblePersonName: '',
        //具体要求
        specificRequirement: '',
        //具体要求详情
        specificRequirementDetail: '',
        //是否支持基层调研
        whetherSupportContact: false,
        //年份
        year: dayjs().format('YYYY'),
      },
      //表单验证规则
      rules: {
        normativeType: [{ required: true, message: '连带规范性动作类型不能为空', trigger: 'blur' }],
        specificRequirement: [{ required: true, message: '具体要求不能为空', trigger: 'blur' }],
        specificRequirementDetail: [{ required: true, message: '具体要求详情不能为空', trigger: 'blur' }],
        departmentName: [{ required: true, message: '主职部门不能为空', trigger: 'blur' }],
        responsiblePersonName: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
        completeDeadline: [{ required: true, message: '完成时限不能为空', trigger: 'blur' }],
        leastNumber: [{ required: true, message: '目标次数不能为空', trigger: 'blur' }],
        whetherEnable: [{ required: true, message: '是否启用不能为空', trigger: 'blur' }],
        year: [{ required: true, message: '年度不能为空', trigger: 'blur' }],
        whetherSupportContact: [{ required: true, message: '是否支持基层调研不能为空', trigger: 'blur' }],
      },
      //表单配置项
      configs: [
        [
          {
            formElName: '连带规范性动作类型',
            formElCode: 'normativeType',
            editable: '1',
            attrs: {
              maxlength: 20,
              showWordLimit: true,
              placeholder: '请填写连带规范性动作类型',
            },
          },
        ],
        [
          {
            formElName: '具体要求',
            formElCode: 'specificRequirement',
            editable: '1',
            attrs: {
              maxlength: 20,
              showWordLimit: true,
              placeholder: '请填写具体要求',
            },
          },
        ],
        [
          {
            formElName: '具体要求详情',
            formElCode: 'specificRequirementDetail',
            editable: '1',
            attrs: {
              type: 'textarea',
              rows: '5',
              placeholder: '请填写具体要求详情',
            },
          },
        ],
        [
          {
            ...DEPT_GROUP_SELECT_CONFIG,
            treeAttrs: {
              ...DEPT_GROUP_SELECT_CONFIG.treeAttrs,
              multiple: true,
            },
            attrs: {
              clearable: false,
              placeholder: '请选择主办部门',
            },
          },
        ],
        [
          {
            formElName: '负责人',
            formElCode: 'responsiblePersonName',
            editable: '1',
            elType: 'personOrOrg',
            visibleField: 'groupIdentityTreeVisible',
            treeAttrs: {
              ...DEPT_GROUP_SELECT_CONFIG.treeAttrs,
              groupCode: 'DY_TJZ_COMP_AND_DEPT_LEADER',
              multiple: true,
            },
            attrs: {
              clearable: false,
              placeholder: '请选择负责人',
            },
          },
        ],
        [
          {
            formElName: '是否支持基层调研',
            formElCode: 'whetherSupportContact',
            editable: '1',
            elType: 'select',
            options: [
              {
                label: '是',
                value: true,
              },
              {
                label: '否',
                value: false,
              },
            ],
            attrs: {
              clearable: false,
            },
          },
        ],
        [
          {
            formElName: '完成时限',
            formElCode: 'completeDeadline',
            editable: '1',
            elType: 'DatePicker',
            attrs: {
              type: 'date',
              valueFormat: 'yyyy-MM-dd',
              format: 'yyyy-MM-dd',
              placeholder: '请选择完成时限',
              clearable: false,
            },
          },
        ],
        [
          {
            formElName: '目标次数',
            formElCode: 'leastNumber',
            editable: '1',
            elType: 'number',
            attrs: {
              min: 1,
              clearable: false,
            },
          },
        ],
        [
          {
            formElName: '是否启用',
            formElCode: 'whetherEnable',
            editable: '1',
            elType: 'select',
            options: [
              {
                label: '是',
                value: true,
              },
              {
                label: '否',
                value: false,
              },
            ],
            attrs: {
              clearable: false,
            },
          },
        ],
        [
          {
            formElName: '年度',
            formElCode: 'year',
            editable: '1',
            elType: 'DatePicker',
            attrs: {
              type: 'year',
              format: 'yyyy',
              valueFormat: 'yyyy',
              placeholder: '请选择年度',
            },
          },
        ],
        [
          {
            formElName: '排序',
            formElCode: 'sort',
            editable: '1',
            elType: 'number',
            attrs: {
              min: 1,
              placeholder: '请输入排序',
            },
          },
        ],
      ],
      //查询项
      searchItems: [
        {
          label: '连带规范性动作类型',
          prop: 'normativeType',
        },
        {
          label: '年度',
          prop: 'year',
          type: 'DatePicker',
          attrs: {
            type: 'year',
            valueFormat: 'yyyy',
            format: 'yyyy',
          },
          defaultValue: dayjs().format('YYYY'),
        },
      ],
      //更多按钮
      moreBtnList: [
        {
          label: '新增',
          type: 'primary',
          methods: this.handleAdd,
        },
      ],
      searchParams: {
        year: dayjs().format('YYYY'),
      },
    };
  },

  methods: {
    /**
     * 编辑详情
     * @param id 编辑的id
     */
    async getDeetsConfigDetail({ id }) {
      try {
        const {
          data: { data },
        } = await getSubjectDetail({
          id,
          ids: [id],
        });
        this.formType = this.EDIT.type;
        Object.assign(this.formData, { ...data, year: dayjs(`${data.year}`).format('YYYY') });
      } catch (error) {
        showErrorMsg(error);
      }
    },

    /**
     * 查询表单
     * @param params 查询参数
     */
    refresh(params) {
      this.searchParams = params;
      this.getPageData();
    },

    /**
     * 提交表单
     */
    handleSubmit() {
      this.submitFormData(this.formData);
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.formData = {
        //完成时限
        completeDeadline: dayjs().endOf('year').format('YYYY-MM-DD'),
        //主职id
        departmentCode: '',
        //主职部门
        departmentName: '',
        //是否启用
        whetherEnable: true,
        //目标次数
        leastNumber: 1,
        //连带规范性动作类型
        normativeType: '',
        //负责人
        responsiblePerson: '',
        //负责人姓名
        responsiblePersonName: '',
        //具体要求
        specificRequirement: '',
        //具体要求详情
        specificRequirementDetail: '',
        //是否支持基层调研
        whetherSupportContact: false,
        //年份
        year: dayjs().format('YYYY'),
      };
    },

    /**
     * @param clickField 点击的字段
     * @param datas 选中的数据
     * @param formData 表单数据
     */
    selectIdOrOrg({ clickField, datas, formData }) {
      switch (clickField) {
        case 'departmentName':
          this.formData.departmentCode = formData.departmentNameIds;
          break;
        case 'responsiblePersonName':
          this.formData.responsiblePerson = formData.responsiblePersonNameIds;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/style/configManagement.scss';
</style>
